<template>
  <div class="container">
    <el-form ref="form" :inline="true" label-position="left" size="mini">
      <el-form-item label="节点名称:">
        <el-select
          v-model="dbSelectCondition"
          style="min-width: 260px"
          clearable
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in dbSelecteds"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addNode()">添加节点</el-button>
      </el-form-item>
    </el-form>

    <el-card
      shadow="always"
      style="width: 100%; height: 100%"
    >
      <el-table
        v-loading="tableLoading"
        :data="nodes"
        border
        header-align="center"
        style="min-width: 300px; width: 100%; height: 100%"
      >
        <el-table-column prop="host" fixed="left" label="主机" align="center" min-width="120px" />
        <el-table-column prop="username" label="用户" align="center" min-width="100px" />
        <!--                <el-table-column prop="after" label="版本" align="center" min-width="80px">-->
        <!--                </el-table-column>-->
        <el-table-column prop="monitoring" label="监控状态" align="center" min-width="140px">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                size="mini"
                :type="scope.row.monitoring ? 'primary' : ''"
                @click="startMonitor(scope.row)"
              >开启</el-button>
              <el-button
                size="mini"
                :type="!scope.row.monitoring ? 'primary' : ''"
                @click="stopMonitor(scope.row)"
              >关闭</el-button>
            </el-button-group>

          </template>
        </el-table-column>
        <el-table-column prop="after" fixed="right" label="操作" align="center" min-width="320px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="train(scope.row)">训练看板</el-button>
            <el-button type="success" size="mini" @click="detail(scope.row)">数据看板</el-button>
            <el-button type="primary" size="mini">编辑</el-button>
            <el-button type="danger" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="添加节点" :visible.sync="editInfoFormVisible" width="1000px" :close-on-click-modal="false">

      <el-form ref="infoForm" :model="edit_info" label-width="150px">
        <el-form-item label="主机：" prop="host" :rules="[ {required: true, message: '请填写主机', trigger: 'blur'}]">
          <el-input v-model="edit_info.host" />
        </el-form-item>

        <el-form-item label="端口：" prop="port" :rules="[ {required: true, message: '请填写端口', trigger: 'blur'}]">
          <el-input v-model="edit_info.port" />
        </el-form-item>

        <el-form-item label="用户：" prop="username" :rules="[ {required: true, message: '请填写用户', trigger: 'blur'}]">
          <el-input v-model="edit_info.username" />
        </el-form-item>

        <el-form-item label="密码：" prop="password" :rules="[ {required: true, message: '请填写密码', trigger: 'blur'}]">
          <el-input v-model="edit_info.password" />
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editInfoFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo('infoForm')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import { getNodes, addNode } from '../../api/api'

export default {
  filters: {
    percentageFilter: function(value) {
      if (!value) {
        return ''
      }
      return Math.round(value * 100) / 100.0 + '%'
    }
  },
  data() {
    return {
      dbSelecteds: [
        { label: '数据库实例1 | DNMind_testing | id:23i', value: '0' }
      ],
      tableLoading: false,
      nodes: [],
      editInfoFormVisible: false,
      original_info: {
        id: undefined,
        host: undefined,
        port: undefined,
        username: undefined,
        password: undefined
      },
      edit_info: {}
    }
  },
  mounted() {
    this.getNodes()
  },
  destroyed() {
    window.onresize = null
  },

  methods: {
    addNode() {
      this.edit_info = JSON.parse(JSON.stringify(this.original_info))
      this.editInfoFormVisible = true
    },
    getNodes() {
      this.tableLoading = true
      const param = {}
      getNodes(param).then((res) => {
        this.tableLoading = false
        this.nodes = res.data
      }).catch((err) => {
        this.tableLoading = false
        console.error(err)
      })
    },
    startMonitor(item) {
      item.monitoring = true
    },
    stopMonitor(item) {
      item.monitoring = false
    },
    submitInfo(formName) {
      // 表单验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '提交中。。。',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (this.edit_info.id) {
            addNode(this.edit_info).then(res => {
              loading.close()
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.editInfoFormVisible = false
              this.getNodes()
            }).catch(() => {
              loading.close()
            })
          } else {
            addNode(this.edit_info).then(res => {
              loading.close()
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.editInfoFormVisible = false
              this.getNodes()
            }).catch(() => {
              loading.close()
            })
          }
        } else {
          return false
        }
      })
    },
    train(item) {
      this.$router.push({ path: '/train', name: 'train', params: { item: JSON.stringify(item) }})
    },
    detail(item) {
      this.$router.push({ path: '/node_detail', name: 'node_detail', params: { item: JSON.stringify(item) }})
    }
  }
}
</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .top-card-title {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        line-height: 22px;
    }

    .top-card-detail {
        color: rgba(0, 0, 0, 0.85);
        font-weight: bolder;
        white-space: nowrap;
        word-break: break-all;
        font-size: 30px;
        line-height: 60px;
    }

    .card-header-title {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        white-space: nowrap;
        word-break: break-all;
        font-size: 18px;
    }

    .el-divider--horizontal {
        margin: 20px 0;
    }

    .el-col-5 {
        width: 20%;
    }

    .table_container {
        overflow: auto;
    }

    .table_btns_container {
        display: flex;
        flex-direction: row;
        align-content: space-around;
        height: 30px;
        line-height: 30px;
        margin: 10px auto;
        width: 100%;
    }

    .table_btns_item_container {
        flex: 0 0 33.333%;
        display: flex;
        justify-content: center;
    }

    .healthChart {
        width: 100%;
        height: 260px;
    }

    .sqlQueryChart {
        width: 100%;
        height: 200px;
    }

    .sqlSlowQueryChart {
        width: 100%;
        height: 200px;
    }

    .report-list-container {
        height: 190px;
        width: 100%;
        overflow: auto;
    }

    .report-list-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        display: flex;
        color: rgba(0, 0, 0, 0.65);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

</style>
